插播

本來預定今天要發佈的文章延後了，今天要要來分享這一兩天的踩雷心路歷，花了一半天時間，連鐵人都沒時間寫，還好有一些些存檔

這次公司專案需要做到圖片上傳這部份的處理，因這次的套件對於手動上傳沒有支援太多，所以需要自己處理這部份，接著就是一連串的踩雷過程...

踩雷開始

一般我們在傳檔給後端的時後，都需要把檔案轉為 Binary 上傳文件的格式，

如圖：

因為這次上傳的是圖片，所以也一起將 http Resquest Headers 裡的 responseType 改為 blob (註 1)
改 blob 後，發現回傳的 response 變這樣

取不到後端給我的 success 資料

如圖：

因為我需要 success 後，後端回給我的的 imageId 才能接續打下一支 api

在公司試了好久，也把所想得到的關鍵字都餵給估狗，一直找不到原因。
到家後，為了重現情境 還到了 imgur 圖床申請檔案上傳 api，搞了好久後，終於好了
結果 imgur 一直報 429 (*註 2) 給我就是一直沒辦法傳，大吐血！！！明明我就剛才申請好！！
然後...時間好晚了，放棄先睡覺，隔天再到公司試。

後來才發現將 responseType 改為 text

createImage(formData: any) {
  return this.httpClient
    .post(url, formData, {
      responseType: 'text', //這裡
      reportProgress: true,
      observe: 'events',
      withCredentials: true,
    })
    .pipe(
      tap(event => {
        console.log('createImage', event);
      })
    );
  }
}

就能同時得到上傳的進度條與 如圖：

這才結束了半天多的踩雷之旅...
嗯...要說是踩雷嗎？也不算是，只能說自己的經驗太少，很少碰到這一部份，也算是繳了學費(時間)

附錄

這個是之前的遇到的問題。
因為一開始在規劃架構時，有在 interceptors 裡的 http Resquest Headers 加上下面這一行做預設，

'Content-Type': contentType || 'application/json'

結果上傳的檔案都變成這種格式

...將上面那一行拿掉就可以成功執行了

這篇文，是為了我逝去的青春做記念

註 1：XMLHttpRequest.responseType
註 2：the server responded with a status of 429 (Too Many Requests) intlTelInput.js